<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>坚球书城</title>

  <script src="js/vue.js"></script>
  <script src="element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/cookie.js"></script>

  <style type="text/css">
    .el-main {
      position: absolute;
      top: 70px;
      bottom: 0px;
      left: 200px;
      right: 10px;
      padding: 0;
    }
  </style>

</head>
<body>
<div id="app" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;">
  <el-container style="height: 100%; border: 1px solid #eee">

    <el-header style="text-align: right; font-size: 12px; ">
      <a href="#" style="float: left;">
        <span><img style="height: 40px;margin-top: 10px" src="http://r3vta9mus.hb-bkt.clouddn.com/nutLogo.png" alt=""></span>
      </a>
      <!--        登录前-->
      <el-dropdown style="top: 50%;right: 40px" v-if="!flag">
        <el-link href="login.html" target="_blank">登录</el-link>
        |
        <el-link type="info" href="register.html">注册</el-link>
      </el-dropdown>
      <!--        登陆后-->
      <el-dropdown style="top: 50%;right: 40px;cursor: pointer" @command="handleCommand" v-if="flag">
        <span>{{this.username}}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="order">个人订单</el-dropdown-item>
          <el-dropdown-item command="cancel">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-container>

      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-menu-item index="1-1" @click="toHome"><i class="el-icon-house" ></i>首页</el-menu-item>
          <el-menu-item index="1-2" @click="toCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-menu-item>
          <el-submenu index="1" v-if="flag&&username=='admin'">
            <template slot="title"><i class="el-icon-message"></i>后台管理</template>
              <el-menu-item index="1-3" @click="toBookManage">图书管理</el-menu-item>
              <el-menu-item index="1-4" @click="toOrderManage">订单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main style="overflow-x: hidden">
          <el-input placeholder="图书名称" style="width: 200px; margin-left: 10px"
                    class="filter-item" v-model="bookName" ></el-input>
          <el-button type="danger" icon="el-icon-search" @click="searchBookName" circle></el-button>
          <el-table :data="tableData" style="margin-left: 10px">
            <el-table-column prop="name" label="书名">
            </el-table-column>
            <el-table-column prop="author" label="作者">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column prop="sales" label="销量">
            </el-table-column>
            <el-table-column prop="stock" label="库存">
            </el-table-column>
            <el-table-column prop="imgPath" label="图片">
              <template slot-scope="scope">
                <el-image style="width: auto; height: 80px"
                          :src="scope.row.imgPath"
                          :preview-src-list="[scope.row.imgPath]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
              <el-button type="warning" @click="addCart(scope)" icon="el-icon-shopping-cart-2" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-left: 30%" v-show="this.pageTotalCount">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="this.pageNo"
                    :page-size="this.pageSize"
                    layout="total, prev, pager, next"
                    :total="this.pageTotalCount">
            </el-pagination>
          </div>
        </el-main>
      </el-container>

      <el-footer height="50px" style="text-align: center;">坚球书城.Copyright ©2021</el-footer>

    </el-container>
  </el-container>
</div>
</body>
<script>
  const vm = new Vue({
    el: "#app",
    mounted() {
      this.bookList()
      this.username =  Cookies.get("username")
      this.isLogin()
    },
    data: {
      tableData: [{
        id:'',
        name: '',
        author: '',
        price: '',
        sales: '',
        stock: '',
        imgPath: ''
      }],
      pageTotalCount:0,
      pageTotal:0,
      pageSize:3,
      pageNo:1,
      username:'',
      flag:false,
      bookName:''
    },
    methods: {
      bookList() {
        var that = this;
        axios({
          method: "get",
          url: "http://localhost:8080/Book/client/clientServlet?action=page&pageNo="+that.pageNo,
          // data: that.pageNo
        }).then(function (response) {
          console.log(response.data)
          that.tableData = response.data.page.items
          that.pageTotalCount = response.data.page.pageTotalCount
          that.pageTotal = response.data.page.pageTotal
          that.pageNo = response.data.page.pageNo
          that.pageSize = response.data.page.pageSize
        })
      },
      toHome(){
        window.location.href='index.html'
      },
      toCart(){
        window.location.href='cart.html'
      },
      toOrderManage(){
        window.location.href='orderManage.html'
      },
      toOrder(){
        window.location.href='order.html'
      },
      toBookManage(){
        window.location.href='bookManage.html'
      },
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo;
        console.log(pageNo)
        //重新调用findPage方法进行分页查询
        this.bookList();
      },
      isLogin(){
        if (Cookies.get("username")!==''&&Cookies.get("username").length>0){
          this.flag = true
          console.log(this.flag)
          console.log(Cookies.get("username"))
        }
        else {
          this.flag = false
        }
      },
      handleCommand(command){
        if (command === 'order'){
          this.toOrder()
        }else if(command === 'cancel'){
          Cookies.set("username",'')
          window.location.href='index.html'
        }
      },
      addCart(scope){
          var that = this
          var id = scope.row.id
        if (this.flag){
            axios({
                method: "get",
                url: "http://localhost:8080/Book/cartServlet?action=addItem&id="+id,
            }).then(function (response) {
                console.log(response)
                that.$message({
                    message: "已添加《"+response.data.data.lastName+"》到购物车",
                    type: 'success'
                });
            })
        }else {
            this.$message({
                message: "请先登录",
                type: 'error'
            });
        }
      },
      searchBookName(){
        console.log(this.bookName)
        var that = this;
        axios({
          method: "get",
          url: "http://localhost:8080/Book/manager/bookServlet?action=pageByName&pageNo="+that.pageNo+"&name="+that.bookName,
        }).then(function (response) {
          console.log(response.data)
          that.tableData = response.data.data.page.items
          that.pageTotalCount = response.data.data.page.pageTotalCount
          that.pageTotal = response.data.data.page.pageTotal
          that.pageNo = response.data.data.page.pageNo
          that.pageSize = response.data.data.page.pageSize
        })
      }
    }
  })
</script>
</html>